<ion-header class="nav-header">
  <ion-toolbar>
    <img src="assets/icon/logo.png" style="height: 40px; width: 116px; position: absolute; top: 2px; left: 50%; margin-left: -58px;"/>
    <ion-buttons slot="end">
      <ion-button (click)="hideSlider()">
        <ion-icon class="iconfont  ion-ios-fanhui1-down slide-h-btn" style="font-size: 16px; color: #fff;"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <ion-slides class="slide-contain" options="slideOpts" #slides  pager="true" (ionSlideTouchEnd)="autoPlay()">
    <ion-slide *ngFor="let item of imgArr">
      <div><img src="{{item.img}}" /></div>
    </ion-slide>
  </ion-slides>
  <ion-item (click)="toNoticeList();$event.stopPropagation" lines="none"
  style="height: 20px; --background: #70737a;background: #70737a; margin-top: -5px;" id="noticeItem">
  <ion-icon class="iconfont  ion-ios-laba"  style="font-size: 20px;margin-top: -27px; color: #fff; font-weight: bold;"></ion-icon>
  <ion-label class="notice-contain" id="notice-contain">
    <div id="n-c-contain">
      <div id="n-c">
        <p style=" color:#fff;font-size: 12px; font-weight: bold;" *ngFor="let item of noticeArr"><span
            [innerHTML]="item.content | html"></span>&nbsp;&nbsp;</p>
      </div>
      <div id="n-c-copy"></div>
    </div>
  </ion-label>
 </ion-item>
  <ion-grid class="home-menu-grid menu-tab">
    <ion-row>
      <ion-col [ngClass]='{"first": firstFlag}' (click)="onSelectMenu(1)">
        热门彩种
      </ion-col>
      <ion-col [ngClass]='{"second": secodFlag}' (click)="onSelectMenu(2)">
        全部彩种
      </ion-col>
      <ion-col [ngClass]='{"third": thirdFlag}' (click)="onSelectMenu(3)">
        我的关注
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid class="home-menu-grid menu-detail">
    <ion-row>
      <!-- 热门彩种 -->
      <ion-col class="hot-lots-col" *ngFor="let item of lots; let i=index" (click)="toLotdetail(item.key,item.name,item.lotteryId)"
        size="6" [ngClass]='{"firstSort":firstFlag,"hidden":!firstFlag,"border-right":(i % 2)==1?false:true}'>
        <div class="ion-c-contain hot-lots">
          <ion-avatar class="ion-float-left lotter-img">
            <img src="{{url}}{{item.img}}">
          </ion-avatar>
          <div class="ion-float-left menu-text">
            <p class="m-t-name">{{item.name}}</p>
            <p class="m-t-time" *ngIf="item.closeTime" [attr.data-code]="item.key" style="color: #0070c0;" data-value="1" data-id="{{item.closeTime}}">
              {{item.closeTime | countdown:(item.key)}}</p>
            <p class="m-t-time" *ngIf="!item.closeTime" [attr.data-code]="item.key" style="color: #d31111;" data-value="0" data-id="{{item.closeTime}}">
              {{item.closeTime | countdown:(item.key)}}</p>
          </div>
          <p class="ion-float-right ion-store" (click)="onStoreFun(item.lotteryId,item.is_follow)">
            <ion-icon class="iconfont ion-ios-shoucang" style=" padding-bottom: 4px;"
              [ngStyle]="{'color':item.is_follow==1 ? '#fd2e27':'#c0c0c0' }"></ion-icon>
          </p>
        </div>
      </ion-col>
      <!-- 所有彩种 -->
      <ion-col class="all-hots-col" *ngFor="let item of lots1; let i=index" (click)="toLotdetail(item.key,item.name,item.lotteryId)"
        size="6" [ngClass]='{"secodSort":secodFlag,"hidden":!secodFlag,"border-right":(i % 2)==1?false:true}'>
        <div class="ion-c-contain all-hots">
          <ion-avatar class="ion-float-left lotter-img">
            <img src="{{url}}{{item.img}}">
          </ion-avatar>
          <div class="ion-float-left menu-text">
            <p class="m-t-name">{{item.name}}</p>
            <p class="m-t-time" *ngIf="item.closeTime" [attr.data-code]="item.key" style="color: #0070c0;" data-value="1" data-id="{{item.closeTime}}">
              {{item.closeTime | countdown:(item.key)}}</p>
            <p class="m-t-time" *ngIf="!item.closeTime" [attr.data-code]="item.key" style="color: #d31111;" data-value="0" data-id="{{item.closeTime}}">
              {{item.closeTime | countdown:(item.key)}}</p>
          </div>
          <p class="ion-float-right ion-store" (click)="onStoreFun(item.lotteryId,item.is_follow)">
            <ion-icon class="iconfont ion-ios-shoucang" style=" padding-bottom: 4px;"
              [ngStyle]="{'color':item.is_follow==1 ? '#fd2e27':'#c0c0c0' }"></ion-icon>
          </p>
        </div>
      </ion-col>
      <!-- 我的关注 -->
      <ion-col class="collects-lots-col" *ngFor="let item of lots2; let i=index"
        (click)="toLotdetail(item.key,item.name,item.lotteryId)" size="6"
        [ngClass]='{"thirdSort":thirdFlag,"hidden":!thirdFlag,"border-right":(i % 2)==1?false:true}'>
        <div class="ion-c-contain collect-lots">
          <ion-avatar class="ion-float-left lotter-img">
            <img src="{{url}}{{item.img}}">
          </ion-avatar>
          <div class="ion-float-left menu-text">
            <p class="m-t-name">{{item.name}}</p>
            <p class="m-t-time" *ngIf="item.closeTime" [attr.data-code]="item.key" style="color: #0070c0;" data-value="1" data-id="{{item.closeTime}}">
              {{item.closeTime | countdown:(item.key)}}</p>
            <p class="m-t-time" *ngIf="!item.closeTime" [attr.data-code]="item.key" style="color: #d31111;" data-value="0" data-id="{{item.closeTime}}">
              {{item.closeTime | countdown:(item.key)}}</p>
          </div>
          <p class="ion-float-right ion-store" (click)="onStoreFun(item.lotteryId,item.is_follow)">
            <ion-icon class="iconfont ion-ios-shoucang" style=" padding-bottom: 4px;"
              [ngStyle]="{'color':item.is_follow==1 ? '#fd2e27':'#c0c0c0' }"></ion-icon>
          </p>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <!-- 首页悬浮的下载app的地方 -->
  <!-- <div class="download-contain" *ngIf="isNoDevice">
      <div class="img" (click)="openDownPage();$event.stopPropagation"><img src="assets/img/index_down_bg.png" width="100px" /></div>
      <div class="close"><i class="iconfont ion-ios-shanchu" (click)="closeContain();$event.stopPropagation"></i></div>
  </div> -->
</ion-content>